<template>
    <div class="view">
        <nav-bar title="选课单" backgroundColor="#7bbcff" color="#fff"></nav-bar>
        <div class="schedule-wrap">
            <cube-scroll ref="scroll" :data="scheduleList">
                <div class="schedule-item" v-for="(schedule,index) in scheduleList" :key="schedule.id">
                    <div class="cover">
                        <img :src="schedule.Image"/>
                    </div>
                    <div class="info">
                        <div class="title">
                            {{schedule.CourseName}}
                            <div class="del" @click="del(schedule.ProductId,index)"><i class="iconfont icon-shanchu"></i></div>
                        </div>
                        <div class="time">
                            <i class="iconfont icon-shijian"></i>
                            <span class="location">{{schedule.PlantTime}}</span>
                            <span class="hour">{{schedule.CourseTimes}}</span>
                        </div>
                        <div class="time"><i class="iconfont icon-shijian"></i>{{schedule.PlantSpan}}</div>
                        <div class="price-buy">
                            <div class="price">{{schedule.Price}}</div>
                            <div class="buy">购买</div>
                        </div>
                    </div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>
<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import NavBar from "@/components/aui/NavBar.vue";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar
        }
    })
    export default class Schedule extends Scene {
        private scheduleList: Array<object> = [];

        @State("UserStore")
        private user!: InterfaceUser;

        public mounted(): void {
            Http.get(this.api.getMyShopingCart, CommonUnit.argumentWithUser(this.user)).then((res) => {
                if (res.Success) {
                    this.scheduleList = res.Data;
                } else {
                    const toast = (<any> this).$createToast({
                        mask: true,
                        type: "warn",
                        time: 1500,
                        txt: res.Message,
                        onTimeout: () => {
                            if (!CommonUnit.responseLoginVerification(res)) {
                                this.navigateLoginPage();
                            }
                        }
                    });
                    toast.show();

                }

            });
        }

        private del(id: number, index: number): void {
            Http.get(this.api.deleteCourse, CommonUnit.argumentWithUser(this.user, {courseId: id})).then((res) => {
                if (res.Success) {
                    this.scheduleList.splice(index, 1);
                } else {
                    const toast = (<any> this).$createToast({
                        mask: true,
                        type: "warn",
                        time: 1500,
                        txt: res.Message,
                        onTimeout: () => {
                            if (!CommonUnit.responseLoginVerification(res)) {
                                this.navigateLoginPage();
                            }
                        }
                    });
                    toast.show();
                }
            });
        }
    }
</script>
<style lang="stylus" scoped>
    .view
        background $theme-page-common-background-color;
        height calc(100vh - 50px);

    .schedule-wrap
        height calc(100vh - 44px - 50px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding-top calc(44px + env(safe-area-inset-top));
        box-sizing content-box;

    .schedule-item
        padding 10px;
        background #fff;
        display flex;
        flex-direction row;

        .cover
            flex 1;
            margin-right 15px;

            img
                width 100%;
                height auto

        .info
            flex 3;
            display flex;
            flex-direction column;
            justify-content space-between

            .title
                color #303030;
                margin-bottom 7px;
                font-size 12pt;
                padding-right 30px;
                position relative

                .del
                    position absolute;
                    right 0;
                    top 0;
                    color $theme-warm-color;

            .address, .time
                color #7c7c7c;
                font-size 13px
                line-height 21px

            .hour
                float right

                &:after
                    content '课时'

            i
                padding-right 5px;

        .price-buy
            color $theme-common-color;
            position relative;
            height 30px;
            display flex;
            justify-content space-between;
            align-items center;

            .price
                font-size 16px;

                &:before
                    content '¥'
                    font-size 11px;
                    padding-right 2px

            .buy
                color $theme-common-color;
                border 1px solid $theme-common-color;
                border-radius 5px;
                font-size: 12px;
                width 46px;
                height 24px;
                text-align center;
                line-height 24px;


</style>
